<template>
    <!-- 菜单列表 -->
    <div>
        <el-table default-expand-all :data="specsList" border style="width: 100%">
            <el-table-column prop="id" label="规格编号">
            </el-table-column>
            <el-table-column prop="specsname" label="规格名称">
            </el-table-column>
            <el-table-column label="规格属性">
                <template slot-scope="item">
                    <div>
                        <el-tag v-for="val in item.row.attrs" :key="val" :disable-transitions="true">{{ val }}</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="item">
                    <div>
                        <el-tag v-if="item.row.status == 1" type="success">启用</el-tag>
                        <el-tag type="danger" v-else>禁用</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="item">
                    <div>
                        <el-button type="primary" circle icon="el-icon-edit" @click="edit(item.row.id)">
                        </el-button>
                        <el-button type="danger" circle icon="el-icon-delete" @click="del(item.row.id)">
                        </el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" class="sumit" :page-size="size"
            @current-change="changePage">
        </el-pagination>
    </div>
</template>

<script>
// 引入辅助性函数
import { mapGetters, mapActions } from "vuex";
// 引入封装好的接口
import { specsDel } from "../../request/api"
export default {
    computed: {
        ...mapGetters({
            // 商品规格总数
            total: "specs/getTotal",
            // 页面展示的条目数
            size: "specs/getSize",
            // 商品规格列表
            specsList: "specs/getSpecsList"
        })
    },
    data() {
        return {
        };
    },
    methods: {
        // 点击编辑按钮
        edit(id) {
            this.$emit("edit", id)
        },
        ...mapActions({
            // 调用商品规格列表行动
            getSpecsList: "specs/specsList_Action",
            // 调用获取商品规格总数行动
            getCount: "specs/specsCount_Action",
            // 调用切换页数的行动
            changePageAction: "specs/changePage_Action"
        }),
        // 点击删除按钮
        del(id) {
            this.$confirm("你确定要删除吗", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                // 调用删除接口
                specsDel({ id }).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.msg);
                        // 重新渲染商品规格总数
                        this.getCount();
                        // 重新渲染当前选中的商品规格列表
                        this.getSpecsList();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            }).catch(() => {
                this.$message.error("取消删除");
            })
        },
        // 点击切换页数并更改显示的列表
        changePage(e) {
            this.changePageAction(e)
        }
    },
    mounted() {
        // 获取商品规格总数
        this.getCount();
        // 获取当前选中的商品规格列表
        this.getSpecsList();
    }
};
</script>

<style scoped>
.sumit {
    margin-top: 30px;
    position: absolute;
    right: 50px;
}
</style>
